<template>
<div style="margin-top: 10px" class="app-contain">
    <el-row :gutter="50">
    <el-col :span="7">
        <el-card>
        <div slot="header" class="clearfix">
            <span>个人信息</span>
        </div>
        <el-row style="text-align: center">
            <el-upload action="/api/common/user/upload"
            :headers="headers"
            accept=".jpg,.png" :show-file-list="false"
            :on-success="uploadSuccess"
            :before-upload="beforeAvatarUpload">
            <el-avatar class="el-dropdown-avatar" :size="120"  :src="form.imagePath"></el-avatar>
            </el-upload>
        </el-row>
        <el-row class="user-info-userName">
            <p style=" margin: 0px; font-weight: bold; text-align: center; font-family: '楷体'; font-size: 25px;">
                账号：{{form.account}}</p>
        </el-row>
        <el-divider/>
        <el-row class="user-info-fullInfo">
            <label>姓名：{{form.username}}</label><br/>
            <!-- <label>年级：{{getLevelName(form.userLevel)}}</label><br/> -->
            <label>权限：{{formatterRole(form.role)}}</label><br/>
            <label>注册时间：{{form.createTime}}</label><br/>
        </el-row>
        </el-card>
    </el-col>
    <el-col :span="17">
        <el-card shadow="hover">
        <el-tabs active-name="event" type="card">
            <el-tab-pane label="用户动态" name="event">
            <div class="block">
                <el-timeline>
                <el-timeline-item  :timestamp="item.createTime" placement="top" :key="item.id" v-for="item in event">
                    <el-card>
                    <p style="margin:0px">{{item.logContent}}</p>
                    </el-card>
                </el-timeline-item>
                </el-timeline>
            </div>
            </el-tab-pane>
            <el-tab-pane label="个人资料修改" name="update">
            <el-form :model="form" ref="form" label-width="100px" v-loading="formLoading" :rules="rules">
                <el-form-item label="姓名：" prop="username" required>
                <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="性别：">
                <el-select v-model="form.sex" placeholder="性别" clearable>
                    <el-option v-for="item in sexEnum" :key="item.key" :value="item.key"
                                :label="item.value"></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="出生日期：">
                <el-date-picker v-model="form.birthDay" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"/>
                </el-form-item>
                <el-form-item label="邮箱">
                <el-input v-model="form.userEmail"></el-input>
                </el-form-item>
                <!-- <el-form-item label="年级：" prop="userLevel" required v-show="form.role != 0">
                    <el-select v-model="form.userLevel" placeholder="年级" clearable>
                        <el-option v-for="item in subjectEnum" :key="item.key" :value="item.key" :label="item.value"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item>
                <el-button type="primary" @click="submitForm">更新</el-button>
                </el-form-item>
            </el-form>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="updatePass">
                <el-form label-width="120px" ref="passForm" :model="passForm" :rules="rules">
                    <el-form-item label="旧密码:" required prop="oldPass">
                        <el-input type="password" v-model="passForm.oldPass" placeholder="请输入旧密码"></el-input>
                    </el-form-item>
                    <el-form-item  label="新密码：" required prop="newPass">
                        <el-input type="password" v-model="passForm.newPass" placeholder="请输入新密码"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码：" required prop="aginPass">
                        <el-input type="password" v-model="passForm.aginPass" placeholder="请确认新密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="updatePass">修改</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
        </el-card>
    </el-col>
    </el-row>
</div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { currentUser,updateSelf,updatePass } from '@/api/profile/profile';
import {userLog} from '@/api/log/log'

export default {
data () {
    const validAginPass = (rule,val,callback) =>{
        if(val !== this.passForm.newPass){
            callback(new Error("请保证两次密码输入一至"));
        }else{
            callback();
        }
    }
    const validOldPass = (rule,val,callback) =>{
        if(val.length <= 0){
            callback(new Error("请输入旧密码"));
        }else{
            callback();
        }
    }
    const validNewPass = (rule,val,callback) =>{
        if(val.length <= 0){
            callback(new Error("请输入新密码"));
        }else{
            callback();
        }
    }
    return {
    event: [],
    form: {
        username: '',
        account: '',
        sex: '',
        birthDay: null,
        userEmail: null,
        userLevel: null,
        imagePath:'',
        role: -1, 
    },
    passForm:{
        oldPass: '',
        aginPass:'',
        newPass: ''
    },
    formLoading: false,
    rules: {
        oldPass : [
        { required: true, validator: validOldPass, trigger: 'blur' }
        ],
        newPass: [
        { required: true, validator: validNewPass, trigger: 'blur' }
        ],
        aginPass: [
        { required: true, validator: validAginPass, trigger: 'blur' }
        ],
        username:[
            { required: true, message: '请输入姓名', trigger: 'blur' }
        ]
    },
    subjectEnum:[
                {
                    key : 1,
                    value: '大一',
                },
                {
                    key : 2,
                    value: '大二',
                },
                {
                    key : 3,
                    value: '大三',
                },
                {
                    key : 4,
                    value: '大四',
                },
            ]
    }
},
created () {
    currentUser().then(resp=>{
        this.form = resp.data;
    })
    userLog().then(resp =>{
        this.event = resp.data.records;
    })
},
methods: {
    // 修改头像
    uploadSuccess (re, file) {
    if (re.code === 200) {
        this.$message.success(re.message);
        this.form.imagePath = re.data;
        console.log(this.form.imagePath,'=================>');
        this.$store.dispatch('user/setAvatar',re.data);
    } else {
        this.$message.error(re.message)
    }
    },
    beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
    },
    // 提交修改的表单
    submitForm () {
        this.$refs.form.validate(valid => {
            if(valid){
                // 发送更新请求
                console.log(this.form);
                updateSelf(this.form).then(resp =>{
                    if(resp.code == 200){
                        this.$message.success(resp.message);
                    }
                })

            }
        })
    },
    // 更新密码
    updatePass(){
        this.$refs.passForm.validate(valid => {
            if(valid){
                //发送改密码请求
                updatePass(this.passForm).then(resp =>{
                    if(resp.code == 200){
                        this.$message.success(resp.message)
                    }else{
                        this.$message.error(resp.message)
                    }
                })
            }
        })
    },
    formatterRole(val){
        return this.enumFormat(this.roleEnum,val)
    },
    // getLevelName(val){
    //     console.log(val,"======>");
    //     let value = '';
    //     this.subjectEnum.forEach(ele =>{
    //         if(ele.key == val){
    //             value = ele.value;
    //             return;
    //         }
    //     })
    //     return value;
    // }
},
computed: {
    ...mapGetters('enumItem', [
    'enumFormat'
    ]),
    ...mapGetters(['token','imagePath']),
    ...mapState('enumItem', {
    sexEnum: state => state.user.sexEnum,
    roleEnum: state => state.user.roleEnum
    }),
    headers(){
            return {
                "token":this.token
            }
        }
}
}
</script>

<style  scoped>

</style>